<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no"/>
		<title>我的FrozenUI</title>
		<link rel="stylesheet" type="text/css" href="css/frozen.css"/>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body ontouchstart="">
		<header class="ui-header ui-header-positive ui-border-b">
			<i class="ui-icon-home" ></i>
			<h1>啊啦资讯</h1>
			<i class="ui-icon-unfold"></i>
			<!--<button class="ui-btn">回首页</button>-->
		</header>
		<footer class="ui-footer ui-footer-btn ui-border-t">
			<ul class="ui-tiled ui-footer-btn">
				<li data-href="index.html" class="ui-border-r">
				<i class="ui-icon-home" ></i>
				<div>资讯</div></li>
				<li data-href="explore.html" class="ui-border-r">
				<i class="ui-icon-pc ui-reddot" ></i>
				<div class="">发现</div></li>
				<li data-href="user.html">
				<i class="ui-icon-personal" ></i>	
				<div>我</div></li>
			</ul>
		</footer>
		<section class="ui-container">
			<div class="ui-slider">
				<ul class="ui-slider-content" style="width: 300%;">
					<li class="current"><span style="background-image: url(./img/samplebannerimage1.png);"></span></li>
					<li ><span style="background-image: url(./img/samplebannerimage2.png);"></span></li>
					<li ><span style="background-image: url(./img/samplebannerimage3.png);"></span></li>
				</ul>
			</div>
			<div class="ui-list">
				<ul class="ui-list ui-list-link ui-border-tb post-list">
					<li class="ui-border-t" data-post = "1">
						<div class="ui-list-img">
							<span style="background-image: url(./img/s-activity2.png);"></span>
							
						</div>
						<div class="ui-list-info">
							<h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
							<p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
						</div>
					</li>
					<li class="ui-border-t" data-post = "2">
						<div class="ui-list-img">
							<span style="background-image: url(./img/samplelistimage.jpg);"></span>
						</div>
						<div class="ui-list-info">
							<h4 class="ui-nowrap">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</h4>
							<p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
						</div>
					</li>
					<li class="ui-border-t" data-post = "3">
						<div class="ui-list-img">
							<span style="background-image: url(./img/samplelistimage2.jpg);"></span>
							
						</div>
						<div class="ui-list-info">
							<h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
							<p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
						</div>
					</li>
					<li class="ui-border-t" data-post = "4">
						<div class="ui-list-img">
							<span style="background-image: url(./img/samplelistimage3.png);"></span>
						</div>
						<div class="ui-list-info">
							<h4 class="ui-nowrap">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</h4>
							<p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
						</div>
					</li>
					<li class="ui-border-t" data-post = "5">
						<div class="ui-list-img">
							<span style="background-image: url(./img/samplelistimage4.png);"></span>
							
						</div>
						<div class="ui-list-info">
							<h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
							<p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
						</div>
					</li>
					<li class="ui-border-t" data-post = "6">
						<div class="ui-list-img">
							<span style="background-image: url(./img/samplelistimage5.png);"></span>
						</div>
						<div class="ui-list-info">
							<h4 class="ui-nowrap">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</h4>
							<p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="ui-loading-wrap">
				<p>加载中...</p>
				<i class="ui-loading"></i>
			</div>
		</section>
		<script src="lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/frozen.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*(function(){
				var tab = new fz.Scroll('.ui-tab',{
					role:"tab",
					autoplay:true,
					interval:3000
				});
				
				tab.on('beforeScrollStart',function(fromIndex,toIndex){
					console.log(fromIndex,toIndex);//from为当前页，to为下一页
				})
			})();
			*/
			//slider
			window.addEventListener('load',function(){
				
				/*fz ：FrozenJS*/
				var slider = new fz.Scroll('.ui-slider',{
					role:'slider',
					indicator:true,
					autoplay:true,
					interval:3000
				});
				
				/*滑动开始前*/
				slider.on('beforeScrollStart',function(from,to){
					//from为当前页,to为下一页
				})
				
				/* 滑动结束 */
				slider.on('scrollEnd',function(curPage){
					// curPage
				});
			})
			
			//页面跳转
			$('.ui-list li,.ui-tiled li').click(function(){
				if($(this).data('href')){
					location.href = $(this).data('href');
				}
			});
			$('.ui-header .ui-icon-home').click(function(){
				location.href = 'index.html';
			});
			//文章页面
			$('.post-list li').click(function(){
				if($(this).data('post')){
					location.href='content.html?post='+$(this).data('post');
				}
			})
			
		</script>
	</body>
	
</html>


